import React, { PureComponent } from 'react';
import {
  HomeTitle
} from './style';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import Banner from '../../components/home/banner';
import SongSheet from '../../components/songSheet';


class Home extends PureComponent {
  render() {
    return (
      <div className="home-wrap">
        <div className="container">
          <Banner />
          <div className="module">
            <HomeTitle>推荐歌单</HomeTitle>
            <SongSheet sheets={this.props.sheets} />
          </div>
        </div>
      </div>
    )
  }

  componentDidMount () {
    this.props.getBanners()
    this.props.getRecommendSheet()
  }
}

const mapState = (state) => {
  return {
    sheets: state.getIn(['home', 'sheets'])
  }
}

const mapDispatch = (dispatch) => ({
  getBanners() {
    const action = actionCreators.getBanners();
    dispatch(action);
  },
  getRecommendSheet() {
    const action = actionCreators.getRecommendSheet();
    dispatch(action);
  }
})

export default connect(mapState, mapDispatch)(Home);